<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 14:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div :key="file.uid" class="ant-upload-list ant-upload-list-picture-card">
    <div class="ant-upload-list-picture-card-container x-upload-file-item-container">
      <div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
           style="margin:0;">
        <div class="ant-upload-list-item-info">
          <a href="#" :title="file.name" class="ant-upload-list-item-thumbnail">
            <img :src="file.preview" :alt="file.name" class="ant-upload-list-item-image"/>
          </a>
        </div>
        <span class="ant-upload-list-item-actions">
          <a
              v-if="file.canPreview"
              href="javascript:void(0)"
              :title="'预览文件-' + fileFullName"
              @click="$emit('preview',file)"
          >
            <a-icon type="eye" style="color:#fff"/>
          </a>
          <a
              v-if="!file.canPreview && download"
              href="javascript:void(0)"
              :title="'下载文件-' + fileFullName"
              @click="$emit('download',file)"
          >
            <a-icon type="download" style="color:#fff"/>
          </a>
          <a v-if="!preview && remove" href="javascript:void(0)" :title="'删除文件-'+fileFullName" @click="$emit('remove',file)">
            <a-icon type="delete" style="color:#fff"/>
          </a>
        </span>
      </div>
      <a href="javascript:void(0)" :title="fileFullName" class="x-upload-file-item-name" @click="$emit('download',file)">
        {{ fileFullName }}
      </a>
    </div>
  </div>
</template>

<script>
import {COMPONENT_TYPE} from '../../constants'

export default {
  name: COMPONENT_TYPE.UPLOAD_FILE + 'Item',
  props: {
    file: {
      type: Object,
      default: () => {
        return {fileId: Date.now()}
      }
    },
    preview: {
      type: Boolean,
      default: false
    },
    download: {
      type: Boolean,
      default: false
    },
    remove: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    fileFullName: {
      get() {
        const {file} = this
        return file.name + '.' + file.type
      }
    }
  }
}
</script>

<style scoped lang="css">
.x-upload-file-item-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  height: 125px;
}

.x-upload-file-item-name {
  width: 100%;
  font-size: 12px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
</style>
